<template>
  <div>
    <div class="f-16 c_text2 mb-16 fw-6">分配规则</div>
    <div class="distribute-rule-main">
      <el-tabs v-model="activeName">
        <el-tab-pane label="对话分配" name="first">
          <div class="alter-box">
            <div class="warning-svg">
              <svg-icon class-name="warning-svg" icon-class="warning" />
            </div>
            <div class="waring-text">
              <div>
                1.
                将企微号设置为分配后，所有私聊都会分配，无需选择；群聊默认不分配，可按需选择
              </div>
              <div>
                2.
                考虑到群聊体验，群聊分发不会触发排队话术、结束话术、下班话术和评价话术
              </div>
            </div>
          </div>
          <div class="talke-title">默认分配</div>
          <div class="distribute-way-rows">
            <div class="rows-item">
              <label class="way-title">分配方式：</label>
              <span class="way-text blue" @click="visibleDialog = true">
                随机分配
                <i class="el-icon-edit"></i>
              </span>
            </div>
            <div class="rows-item">
              <label class="way-title">私聊分配：</label>
              <span class="way-text"> 全部私聊 </span>
            </div>
            <div class="rows-item">
              <label class="way-title">群聊分配：</label>
              <span class="way-text" @click="visibleGroupDialog = true">
                未分配
                <i class="el-icon-edit blue"></i>
              </span>
            </div>
          </div>
          <div class="talke-title">自定义分配</div>
          <div class="table-wrap">
            <div class="table-head">
              <div class="btns-rows">
                <el-button
                  type="primary"
                  plain
                  @click="
                    onNavigationTo(
                      '/client/service/serviceSetting/distribute-rule'
                    )
                  "
                  >企微号分配设置</el-button
                >
                <el-button
                  type="primary"
                  plain
                  @click="
                    onNavigationTo(
                      '/client/service/serviceSetting/distribute-group'
                    )
                  "
                  >群聊分发设置</el-button
                >
              </div>
              <div>
                <el-form
                  :model="queryParams"
                  ref="queryForm"
                  size="small"
                  :inline="true"
                  class="flexbetween"
                >
                  <el-form-item label="" class="mb-0">
                    <el-input
                      v-model="queryParams.phone"
                      class="search-input"
                      placeholder="搜手机号"
                      suffix-icon="el-icon-search"
                      style="width: 150px"
                    />
                  </el-form-item>
                  <el-form-item label="" class="mb-0">
                    <el-select
                      v-model="queryParams.way"
                      placeholder="分配方式"
                      style="width: 150px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="" class="mb-0">
                    <el-select
                      v-model="queryParams.feipei"
                      placeholder="选择分组"
                      style="width: 150px"
                    >
                      <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                      >
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="date" label="参与分发的企微号">
                <template slot-scope="scope">
                  <div class="company-account">
                    <img
                      class="account-cover"
                      src="https://wework.qpic.cn/wwpic/177031_HhrnVYv6QQSgQ2C_1686909054/0"
                    />
                    <div class="account-info">
                      <div class="name">闵雨微</div>
                      <div class="desc">@志新</div>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="name" label="分配规则">
                <template slot-scope="scope">
                  <div class="rows-item">
                    <label class="way-title">未分配</label>
                    <span class="way-text">
                      <i class="el-icon-edit"></i>
                    </span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="address" label="私聊分配">
                <div class="rows-item">
                  <div class="rows-item">
                    <label class="way-title">全部分配</label>
                  </div>
                </div>
              </el-table-column>
              <el-table-column prop="address" label="群聊分配">
                <div class="rows-item">
                  <label class="way-title">未分配</label>
                  <span class="way-text">
                    <i class="el-icon-edit"></i>
                  </span>
                </div>
              </el-table-column>
              <template slot="empty">
                <TableEmpty />
              </template>
            </el-table>
          </div>
        </el-tab-pane>
        <el-tab-pane label="客服分配" name="second">
          <div class="service-block">
            <div class="block-title">按客服设置</div>
            <el-radio-group v-model="checkRadio">
              <el-radio :label="0" class="flex-group-center">
                <div class="radio-title">按当前负载分配</div>
                <div class="radio-desc">
                  当有新对话进来时，优先分配给对应范围内当前接待对话数最少的客服
                </div>
              </el-radio>
              <el-radio :label="1" class="flex-group-center">
                <div class="radio-title">随机分配</div>
                <div class="radio-desc">
                  新的对话在可分配的客服中进行随机分配
                </div>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="service-block">
            <div class="block-title">按分组设置</div>

            <el-table
              v-loading="loading"
              :data="tableList"
              style="width: 100%; margin-bottom: 20px"
              row-key="id"
              default-expand-all
              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
            >
              <el-table-column prop="name" label="分组" sortable>
              </el-table-column>
              <el-table-column width="300px">
                <template slot="header">
                  <span>只接收固定分配方式的对话 </span>
                  <el-tooltip
                    effect="dark"
                    placement="top"
                    popper-class="commtooltip"
                  >
                    <div slot="content">
                      开启后，只有与该分组为固定分配关<br />系的企微号上符合设定的分配规则的<br />消息才会分配给该分组下的客服。
                    </div>
                    <svg-icon
                      icon-class="iquestion"
                      class-name="c_888999 f-14 ml-6"
                    />
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-switch
                    v-model="scope.row.status"
                    active-color="#13ce66"
                    inactive-color="#ff4949">
                  </el-switch>
                </template>
              </el-table-column>
              <template slot="empty">
                <TableEmpty />
              </template>
            </el-table>
            <!-- <el-table v-loading="loading" class="commtable chattable" :data="tableList">
            <el-table-column label="分组" prop="phonenumber">
            </el-table-column>
            <el-table-column label="" prop="phonenumber" width="300px">
              <template slot="header">
                <span>只接收固定分配方式的对话 </span>
                <el-tooltip effect="dark" placement="top" popper-class="commtooltip">
                  <div slot="content">开启后，只有与该分组为固定分配关<br/>系的企微号上符合设定的分配规则的<br/>消息才会分配给该分组下的客服。</div>
                  <svg-icon icon-class="iquestion" class-name="c_888999 f-14 ml-6" />
                </el-tooltip>
              </template>
              <template slot-scope="scope">
                <el-input size="small" style="width: 98px;"/>
              </template>
            </el-table-column>
            <template slot="empty">
              <TableEmpty />
            </template>
          </el-table> -->
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
    <NewDepositDialog
      :visible="visibleDialog"
      @handCloseDialog="onHandCloseDialog"
    />
    <NewGroupDepositDialog
      :visible="visibleGroupDialog"
      @handCloseDialog="onHandCloseGroupDialog"
    />
  </div>
</template>
<script>
import NewDepositDialog from "./components/NewDepositDialog";
import NewGroupDepositDialog from "./components/NewGroupDepositDialog";
export default {
  data() {
    return {
      visibleDialog: false,
      visibleGroupDialog: false,
      activeName: "first",
      options: [
        { id: 1, name: "不分配" },
        { id: 2, name: "随机分配" },
        { id: 3, name: "优先分配" },
        { id: 4, name: "固定分配" },
      ],
      queryParams: {},
      tableData: [{ id: 1 }],
      checkRadio: 0,
      tableList: [
        {
          id: 2,
          name: "王小虎",
          status: false,
        },
        {
          id: 3,
          name: "王小虎",
          status: true,
          children: [
            {
              id: 31,
              name: "王小虎",
              status: true,
            },
            {
              id: 32,
              name: "王小虎",
              status: true,
            },
          ],
        },
      ],
      loading: false,
    };
  },
  components: {
    NewDepositDialog,
    NewGroupDepositDialog,
  },
  methods: {
    onHandCloseDialog() {
      this.visibleDialog = false;
    },
    onNavigationTo(path) {
      this.$router.push(path);
    },
    onHandCloseGroupDialog() {
      this.visibleGroupDialog = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.distribute-rule-main {
  .alter-box {
    box-sizing: border-box;
    margin: 0;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    background-color: #f0f7ff;
    border: 1px solid #abceff;
    font-variant: tabular-nums;
    line-height: 24px;
    position: relative;
    display: flex;
    padding: 8px 15px;
    word-wrap: break-word;
    border-radius: 4px;
    .warning-svg {
      font-size: 18px;
    }
    .waring-text {
      margin-left: 8px;
    }
  }
  .talke-title {
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 22px;
    margin: 16px 0 12px;
  }
  .distribute-way-rows {
    display: flex;
    align-items: center;
    font-size: 14px;
    .rows-item {
      margin-right: 24px;
      .way-title {
        font-weight: 400 !important;
      }
      .way-text {
        text-decoration: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
      }
      .blue {
        color: #3070ff;
      }
    }
  }
  .table-wrap {
    .table-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      .table-search-rows {
        display: grid;
        grid-template-columns: 150px 150px 150px;
        column-gap: 8px;
      }
    }
    .company-account {
      display: flex;
      align-items: center;
      .account-cover {
        width: 40px;
        height: 40px;
      }
      .account-info {
        margin-left: 8px;
        .name {
          font-size: 14px;
          line-height: 22px;
          color: #222333;
        }
        .desc {
          color: #f08b00;
          line-height: 22px;
        }
      }
      .accept-account {
        font-size: 14px;
        line-height: 22px;
      }
    }
    .rows-item {
      margin-right: 24px;
      .way-title {
        font-weight: 400 !important;
      }
      .way-text {
        display: inline-block;
        margin-left: 6px;
        color: #3070ff;
        text-decoration: none;
        background-color: transparent;
        outline: none;
        cursor: pointer;
      }
    }
  }
  .service-block {
    position: relative;
    padding: 16px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    margin-bottom: 16px;
    .block-title {
      font-size: 12px;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.45);
      margin-bottom: 16px;
    }
    .flex-group-center {
      display: flex;
      &:not(:first-child) {
        margin-top: 8px;
      }
      .radio-title {
        font-size: 14px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 22px;
        margin-bottom: 0;
      }
      .radio-desc {
        font-size: 12px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
        line-height: 20px;
        margin-bottom: 0;
        margin-top: 4px;
      }
    }
  }
}
</style>